<template>
  <view class="about-page">
    <!-- 页面标题 -->
    <view class="page-header">
      <!-- 移除重复的标题，只保留一个 -->
    </view>

    <!-- 应用信息 -->
    <view class="app-info-section">
      <view class="app-logo">
        <image src="/static/images/logo.png" class="logo-image" />
      </view>
      <view class="app-details">
        <text class="app-name">智慧社区管理系统</text>
        <text class="app-version">版本 {{ appInfo.version }}</text>
        <text class="app-build">构建时间 {{ appInfo.buildTime }}</text>
      </view>
    </view>

    <!-- 公司信息 -->
    <view class="company-section">
      <view class="section-title">开发团队</view>
      <view class="company-info">
        <text class="company-name">智慧社区科技有限公司</text>
        <text class="company-desc">专注于智慧社区解决方案的科技公司</text>
        <text class="company-address">地址：北京市朝阳区xxx街道xxx号</text>
        <text class="company-phone">电话：400-123-4567</text>
        <text class="company-email">邮箱：support@smartcommunity.com</text>
      </view>
    </view>

    <!-- 功能介绍 -->
    <view class="features-section">
      <view class="section-title">功能介绍</view>
      <view class="features-list">
        <view class="feature-item">
          <view class="feature-icon">
            <u-icon name="home" size="20" color="#1976d2"></u-icon>
          </view>
          <view class="feature-info">
            <text class="feature-title">物业管理</text>
            <text class="feature-desc">提供全面的物业管理服务</text>
          </view>
        </view>
        
        <view class="feature-item">
          <view class="feature-icon">
            <u-icon name="shield" size="20" color="#1976d2"></u-icon>
          </view>
          <view class="feature-info">
            <text class="feature-title">安防管理</text>
            <text class="feature-desc">智能安防系统管理</text>
          </view>
        </view>
        
        <view class="feature-item">
          <view class="feature-icon">
            <u-icon name="rmb-circle" size="20" color="#1976d2"></u-icon>
          </view>
          <view class="feature-info">
            <text class="feature-title">在线支付</text>
            <text class="feature-desc">便捷的在线缴费服务</text>
          </view>
        </view>
        
        <view class="feature-item">
          <view class="feature-icon">
            <u-icon name="service" size="20" color="#1976d2"></u-icon>
          </view>
          <view class="feature-info">
            <text class="feature-title">社区服务</text>
            <text class="feature-desc">丰富的社区生活服务</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 技术支持 -->
    <view class="support-section">
      <view class="section-title">技术支持</view>
      <view class="support-list">
        <view class="support-item" @click="contactSupport">
          <view class="support-icon">
            <u-icon name="service" size="20" color="#666"></u-icon>
          </view>
          <view class="support-info">
            <text class="support-title">联系客服</text>
            <text class="support-desc">获取技术支持帮助</text>
          </view>
          <view class="support-arrow">
            <u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
          </view>
        </view>
        
        <view class="support-item" @click="showFeedback">
          <view class="support-icon">
            <u-icon name="chat" size="20" color="#666"></u-icon>
          </view>
          <view class="support-info">
            <text class="support-title">意见反馈</text>
            <text class="support-desc">提交使用建议和问题</text>
          </view>
          <view class="support-arrow">
            <u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
          </view>
        </view>
        
        <view class="support-item" @click="showPrivacy">
          <view class="support-icon">
            <u-icon name="lock" size="20" color="#666"></u-icon>
          </view>
          <view class="support-info">
            <text class="support-title">隐私政策</text>
            <text class="support-desc">了解隐私保护政策</text>
          </view>
          <view class="support-arrow">
            <u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
          </view>
        </view>
        
        <view class="support-item" @click="showTerms">
          <view class="support-icon">
            <u-icon name="file-text" size="20" color="#666"></u-icon>
          </view>
          <view class="support-info">
            <text class="support-title">用户协议</text>
            <text class="support-desc">查看用户使用协议</text>
          </view>
          <view class="support-arrow">
            <u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
          </view>
        </view>
      </view>
    </view>

    <!-- 版权信息 -->
    <view class="copyright-section">
      <text class="copyright-text">© 2025 智慧社区科技有限公司</text>
      <text class="copyright-text">版权所有，保留一切权利</text>
    </view>
  </view>
</template>

<script setup>
/**
 * 关于我们页面
 * @author Wu.Liang
 * @date 2025-01-21
 * @version 1.0.0
 */

import { reactive } from 'vue'

// 应用信息
const appInfo = reactive({
  version: 'v2.1.0',
  buildTime: '2025-01-15'
})

// 联系客服
const contactSupport = () => {
  uni.showModal({
    title: '联系客服',
    content: '客服电话：400-123-4567\n工作时间：周一至周日 9:00-18:00',
    showCancel: false,
    confirmText: '确定'
  })
}

// 意见反馈
const showFeedback = () => {
  uni.navigateTo({
    url: '/pages/profile/feedback'
  })
}

// 隐私政策
const showPrivacy = () => {
  uni.navigateTo({
    url: '/pages/profile/privacy'
  })
}

// 用户协议
const showTerms = () => {
  uni.navigateTo({
    url: '/pages/profile/terms'
  })
}
</script>

<style lang="scss" scoped>
.about-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 0;
}

.page-header {
  background: #2d8cf0;
  padding: 15px 20px;
  text-align: center;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-info-section {
  background: white;
  margin: 15px;
  border-radius: 10px;
  padding: 30px 20px;
  text-align: center;
  
  .app-logo {
    margin-bottom: 20px;
    
    .logo-image {
      width: 80px;
      height: 80px;
      border-radius: 15px;
    }
  }
  
  .app-details {
    .app-name {
      display: block;
      font-size: 20px;
      font-weight: bold;
      color: #333;
      margin-bottom: 8px;
    }
    
    .app-version {
      display: block;
      font-size: 14px;
      color: #666;
      margin-bottom: 5px;
    }
    
    .app-build {
      display: block;
      font-size: 12px;
      color: #999;
    }
  }
}

.company-section,
.features-section,
.support-section {
  background: white;
  margin: 15px;
  border-radius: 10px;
  padding: 20px;
  
  .section-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
  }
}

.company-info {
  .company-name {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
  }
  
  .company-desc {
    display: block;
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
  }
  
  .company-address,
  .company-phone,
  .company-email {
    display: block;
    font-size: 12px;
    color: #999;
    margin-bottom: 5px;
  }
}

.features-list {
  .feature-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .feature-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background: #e3f2fd;
      color: #1976d2;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      
      .iconfont {
        font-size: 20px;
      }
    }
    
    .feature-info {
      flex: 1;
      
      .feature-title {
        display: block;
        font-size: 16px;
        color: #333;
        margin-bottom: 3px;
      }
      
      .feature-desc {
        display: block;
        font-size: 12px;
        color: #999;
      }
    }
  }
}

.support-list {
  .support-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    &:active {
      background: #f8f9fa;
    }
    
    .support-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background: #f8f9fa;
      color: #666;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      
      .iconfont {
        font-size: 20px;
      }
    }
    
    .support-info {
      flex: 1;
      
      .support-title {
        display: block;
        font-size: 16px;
        color: #333;
        margin-bottom: 3px;
      }
      
      .support-desc {
        display: block;
        font-size: 12px;
        color: #999;
      }
    }
    
    .support-arrow {
      .iconfont {
        font-size: 16px;
        color: #ccc;
      }
    }
  }
}

.copyright-section {
  text-align: center;
  padding: 30px 20px;
  
  .copyright-text {
    display: block;
    font-size: 12px;
    color: #999;
    margin-bottom: 5px;
  }
}

// 响应式适配
@media screen and (max-width: 375px) {
  .app-info-section,
  .company-section,
  .features-section,
  .support-section {
    margin: 10px;
    padding: 15px;
  }
}

@media screen and (min-width: 376px) and (max-width: 768px) {
  .app-info-section,
  .company-section,
  .features-section,
  .support-section {
    margin: 15px;
    padding: 20px;
  }
}

@media screen and (min-width: 769px) {
  .about-page {
    max-width: 600px;
    margin: 0 auto;
  }
  
  .app-info-section,
  .company-section,
  .features-section,
  .support-section {
    margin: 20px;
    padding: 25px;
  }
}
</style>
